<template>
<div class="app">
  <ref-component></ref-component>
  <TabContainert></TabContainert>
  <nav-bar>
    <template v-slot:left>
      <div>left组件</div>
    </template>
     <template v-slot:center>
      <div>center组件</div>
    </template>
      <template v-slot:right>
      <div>right组件</div>
    </template>
    <div>default组件</div>
  </nav-bar>
  <header-com title="我是标题" content="我是内容" class="why" id="abc"></header-com>
  <header-com title="我是标题111" content="我是内容222" :info="info"></header-com>
  <header-com :title="contentMessage.title" :content="contentMessage.content"></header-com>
  <main-c></main-c>
  <list></list>
  <footer-c></footer-c>
  <tab-container></tab-container>
  <my-slot-p>
    <h3>这里是h3标题</h3>
  </my-slot-p>
  <my-slot-p>
    <h5>这里是h5标题</h5>
  </my-slot-p>
  <my-slot-p>
     <button-componnet></button-componnet>
  </my-slot-p>
</div>
</template>

<script>
import HeaderCom from './components/Header.vue'
import MainC from './components/Main.vue'
import List from './components/List.vue'
import FooterC from './components/Footer.vue'
import TabContainer from './components/TabContainer.vue'
import MySlotP from './components/MySlotP.vue'
import ButtonComponnet from './components/ButtonComponnet.vue'
import NavBar from './components/NavBar'
import TabContainert from './components/tabComponnent/index'
import RefComponent from './components/Refs/RefComponent.vue'
export default {
  name: 'App',
  components: {
    NavBar,
    HeaderCom,
    MainC,
    List,
    FooterC,
    TabContainer,
    MySlotP,
    ButtonComponnet,
    TabContainert,
    RefComponent
  },
  data () {
    return {
      contentMessage: {
        title: '内容333',
        content: 'neiiq'
      },
      info: {
        message: '消息666'
      }
    }
  }
}
</script>

<style scoped>
</style>
